<template>
	<view>
		<view class="info margin30">
			<view class="title">{{data.shop_info.name}}</view>
			<view class="runtime">营业时间：{{data.shop_info.run_start_time_text}} - {{data.shop_info.run_end_time_text}}&emsp;联系方式：{{data.shop_info.mobile || '-'}}</view>
			<view class="text">门店照片</view>
			<view class="imgbox flex-start">
				<image v-for="(item,index) in data.door_img" :src="item" mode="aspectFill" @tap="previewImage(item)"></image>
			</view>
			<view class="text">店内照片</view>
			<view class="imgbox flex-start">
				<image v-for="(item,index) in data.indoor_img" :src="item" mode="aspectFill" @click="previewImage(item)"></image>
			</view>
			<view class="text">导购员照片</view>
			<view class="imgbox flex-start">
				<image v-for="(item,index) in data.sales_img" :src="item" mode="aspectFill" @click="previewImage(item)"></image>
			</view>
			<view class="flex-s addressbox" @click="getMap()">
				<view class="address">地址：{{data.all_name}}</view>
				<!-- <button class="share" open-type="share" hover-class="none"> -->
					<!-- <image class="share-icon" src="/static/image/icon_wechat.png"></image> -->
					<view class="flex-start" style="margin-right: 10rpx;">
						<uni-icons type="redo" size="22"></uni-icons>
						<!-- <view>分享</view> -->
					</view>
				<!-- </button> -->
			</view>
		</view>
		
		<view class="titname flex-s">
			<view class="flex-start">
				<text class="null"></text>
				<view class="recommend">商品推荐</view>
			</view>
			<router-link :to="{path: '/bundle/pages/goods_cate/goods_cate'}">
				<view class="flex-start">
					<text class="moreTxt ">更多</text><uni-icons type="right" size="16" color="#868585"></uni-icons>
				</view>
			</router-link>
		</view>
		
		<view class="shop_box ">
			<view v-for="(item, index) in data.shop_info.goods_list" :key="index">
				<view class="item bg-white flex col-top">
					<router-link :to="{path: '/bundle/pages/goodsDetail/index', query: {id: item.goods_id || item.id}}">
					<view class="goods-img">
						<u-image width="240rpx" height="240rpx" :border-radius="10" :src="item.image"></u-image>
					</view>
					</router-link>
					<view class="goods-info m-l-20 flex-1">
						<router-link :to="{path: '/bundle/pages/goodsDetail/index', query: {id: item.goods_id || item.id}}">
							<view class="goods-name line-2" :class="{'store-tag': item.shop_type == 1}">{{item.name}}</view>
							<view class="flex-start" style="margin-left: -8rpx;"> 
								<view class="ellipsis cs_text" v-for="(item2,index2) in item.arguments_text">
									{{item2}}
								</view>
							</view>
							<view class="flex row-between">
								<view class="price m-t-10 flex">
									<text class="dj">定金</text>
									<price-format style="margin-bottom: 4rpx;" color="#F1351A" class="m-r-10" :first-size="34" :second-size="26"
										:subscript-size="22" :price="item.prepay_price" :weight="500"></price-format>
									<text class="qgty">全国统一零售价</text>
									<!-- line-through -->
									<price-format style="margin-bottom: 4rpx;" class="muted" :firstSize="24" :secondSize="24" :subscript-size="24"
										 :price="item.min_price || item.price"></price-format>
								</view>
							</view>
							<view style="color: #999999; font-size: 22rpx;margin: 6rpx 0 6rpx 0;">{{item.comment.all_comment}} 条评价</view>
						</router-link>
					<!-- 	<view v-if="item.shop_type!=1" class="flex-start" style="font-size: 22rpx;"
						@click="apifun.navigate('/bundle_b/pages/moreshop?name='+item.shop_info.name+'&&list='+encodeURIComponent(JSON.stringify(item.shop_info.shop_address_list)))">
							<view style="margin-right: 14rpx;color: #999999;">{{item.shop_info.name}}</view>
							<view>附近门店<u-icon name="arrow-right"></u-icon></text></view>
						</view> -->
					</view>
				</view>
			</view>
				<!-- <image class="shop_img" :src="item.image" mode=""></image>
				<view class="ri">
					<view class="shop_name ellipsis03">{{item.name}}</view>
					<view class="shop_remark">{{item.remark}}</view>
					<view class="flex-s">
						<view class="">
							<price-format :color="'#ff2d66'" class="m-r-10" :first-size="40" :second-size="25"
							:subscript-size="24" :price="item.min_price" :weight="500"></price-format>
						</view>
						<view class="look" @click="toGoodsDetail(item.id)">去看看</view>
					</view>
				</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getShopAddressInfo,
	} from '@/api/shop'
	export default {
		data() {
			return {
				shop_address_id:'',
				data:[]
			}
		},
		onLoad(option) {
			this.shop_address_id = option.shop_address_id
			// this.shop_address_id = 31
			this.getShopAddressInfo()
		},
		methods: {
			getMap(){
				uni.openLocation({
					latitude: Number(this.data.latitude),
					longitude: Number(this.data.longitude),
					name: this.data.shop_info.name,
					address: this.data.all_name,
					success: function () {
						console.log('success');
					}
				});
			},
			previewImage(img) { // 预览图片
				uni.previewImage({
					// urls: [publicFunction.URLimg + img],
					urls: [ img],
					loop: true,
				});
			},
			toGoodsDetail(id){
				uni.navigateTo({
					url:'/bundle/pages/goodsDetail/index?id='+id
				})
			},
			async getShopAddressInfo() {
				const {
					data,
					code
				} = await getShopAddressInfo({
					shop_address_id: this.shop_address_id,
					// shop_address_id: 31,
				})
				if (code == 1) {
					this.data = data
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.qgty{
		font-size: 22rpx;
		color: #999999;
		// margin-bottom: 6rpx; 
	}
	.dj{
		font-size: 24rpx;
		color: #F1351A;
		margin-right: 10rpx;
		// margin-bottom: 6rpx;
	}
	.cs_text{
		width: 156rpx;
		color: #999999;
		border-right: 1rpx solid #c2c2c2;
		padding: 0 8rpx;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.cs_text:last-child{
		border: none;
	}
	.item {
		padding: 20rpx;

		&:not(:last-of-type) {
			margin-bottom: 20rpx;
		}
		.goods-info {
			padding: 10rpx;
			.goods-name {
				height: 72rpx;
				// background-color: #F1351A;
				line-height: 36rpx;
			}

		}
	}
	page{
		/* color: #000000; */
		padding-bottom: 40rpx;
	}
.info{
	border-radius: 14rpx;
	padding: 30rpx 20rpx;
	background-color: #fff;
}
.title{
	font-size: 32rpx;
	font-weight: 900;
	margin-bottom: 30rpx;
}
.text{
	font-size: 28rpx;
	margin-top: 16rpx;
	margin-bottom: 10rpx;
}
.imgbox{
	margin-left: 26rpx;
}
.imgbox image{
	width: 180rpx;
	height: 110rpx;
	margin-right: 14rpx;
	border-radius: 10rpx;
}
.addressbox{
	margin-top: 34rpx;
	border-top: 1rpx solid #f4f3f3;
}
.address{
	width: 540rpx;
	font-size: 30rpx;
	font-weight: 900;
}
.share::after {
	border: none;
	border-radius: none;
}
.share {
	line-height: 88rpx;
	padding: 0 !important;
}
.titname{
	padding: 30rpx 40rpx;
}
.null{
	width: 8rpx;
	height: 32rpx;
	background-color: #f7707c;
	display: inline-block;
	margin-right: 14rpx;
}
.recommend{
	font-size: 32rpx;
}
.moreTxt{
	color: #868585;
}
.shop_box{
	background-color: #ffffff;
	border-radius: 14rpx;
}
.row{
	margin-bottom: 30rpx;
	margin: 0 20rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eeeeee;
}
.shop_img{
	width: 210rpx;
	height: 210rpx;
	border: #eeeeee solid 1rpx;
	border-radius: 14rpx;
}
.ri{
	margin-left: 24rpx;
	/* display: flex; */
	/* align-items: space-between; */
}
.shop_name{
	width: 400rpx;
	font-size: 28rpx;
}
.shop_remark{
	font-size: 24rpx;
	margin-bottom: 50rpx;
	margin-top: 2rpx;
	color: #9c9b9b;
}
.look{
	color: #f5f5f5;
	font-size: 22rpx;
	background-color: #e14661;
	padding: 6rpx 22rpx;
	border-radius: 50rpx;
}
.runtime{
	font-size: 26rpx;
	color: #7c7c7c;
	margin-top: -30rpx;
	margin-bottom: 20rpx;
}
</style>
